<template>
    <div>
        <el-card>
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-input
                        placeholder="请输入电影名称"
                        class="input-with-select"
                        v-model="queryInfo.name"
                        clearable
                        @clear="getMovieList"
                    >
                    </el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" size="small" @click="getMovieList">搜索</el-button>
                </el-col>

              <el-col :span="14" style="text-align: right">
                <el-button type="warning" size="small" @click="synchHotMovie">同步热映</el-button>
                <el-button type="success" size="small" @click="synchFutureMovie">同步即将上映</el-button>
              </el-col>

            </el-row>
            <el-table :data="movieList" border stripe>
                <el-table-column label="封面">
                    <template slot-scope="sc">
                        <img
                            :src="sc.row.logo"
                            slot="reference"
                            width="80"
                            height="120"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="电影名称" prop="name"></el-table-column>
                <el-table-column label="导演" prop="director"></el-table-column>
                <el-table-column label="演员" prop="actors"></el-table-column>
                <el-table-column label="类型" prop="type"></el-table-column>
                <el-table-column label="首映日期" prop="releaseDate"></el-table-column>
                <el-table-column label="影片级别" width="120">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.level" @change="updateLevel(scope.row)" size="small">
                      <el-option
                          v-for="item in levelList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
import Api from '@/api/Movie.js'
export default {
    data() {
        return {
            queryInfo: {
                name: "",
                pageNo: 1, // 页码
                pageSize: 10, // 页大小
            },
            movieList: [],
            total: 0,
            fileList: [],
            levelList: [{
              value: 'A',
              label: 'A'
            },{
              value: 'B',
              label: 'B'
            },{
              value: 'C',
              label: 'C'
            }]
        };
    },
    watch: {

    },
    created() {
        this.getMovieList();
    },
    methods: {
        getMovieList() {
            Api.getMovieList(this.queryInfo).then((res) => {
                if (res.success) {
                    this.movieList = res.data.records;
                    this.total = res.data.total;
                } else {
                    return this.$message.error("获取电影列表失败");
                }
            });
        },
        synchHotMovie() {
            Api.synchHotMovie(this.queryInfo).then((res) => {
                if (res.success) {
                    return this.$message.success("同步中。。。");
                } else {
                    return this.$message.error("同步失败");
                }
            });
        },
        synchFutureMovie() {
            Api.synchFutureMovie(this.queryInfo).then((res) => {
                if (res.success) {
                    return this.$message.success("同步中。。。");
                } else {
                    return this.$message.error("同步失败");
                }
            });
        },
        updateLevel(movieinfo) {
          Api.updateMovieLevel({'id':movieinfo.id, 'level':movieinfo.level}).then(res => {
            if (res.success) {
              this.$message.success('设置成功！')
            } else {
              return this.$message.error('设置失败！')
            }
          })
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageNo = 1;
            this.queryInfo.pageSize = pageSize;
            this.getMovieList();
        },
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo;
            this.getMovieList();
        }
    },
};
</script>

<style>
.form_ipt {
    width: 450px;
}
</style>
